<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:400,700" rel="stylesheet">
  <link href="./style.css" rel="stylesheet">
</head>

<body>
  <header>
    <h1>Mozilla</h1>
    <img src="./images/firefox-logo120.png" alt="Firefox logo">
  </header>

  <main>
    <article>
      <iframe width="400" height="225"
        src="//player.bilibili.com/player.html?aid=615683924&bvid=BV1Hh4y1E7st&cid=1187977530&page=1" scrolling="no"
        frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
      <h2>自由网络 尽情驰骋</h2>

      <p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的 技术人员、思考者、建造者。我们致力于让 Internet
        保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>

      <p>更多精彩信息，敬请点击下方图片。<a href="https://www.flickr.com/photos/mathiasappel/21675551065/">小熊猫照片</a>由 Mathias Appel 拍摄
      </p>
    </article>

    <div class="further-info">
      <a href="https://www.mozilla.org/zh-CN/firefox/new/">
        <img srcset="images/firefox-logo120.png 120w,
                     images/firefox-logo400.png 400w" sizes="(max-width: 500px) 120px,
                    400px" src="./images/firefox-logo400.png" alt="下载 Firefox">
      </a>
      <a href="https://www.mozilla.org/">
        <img srcset="images/mozilla-dinosaur120.png 120w,
                     images/mozilla-dinosaur400.png 400w" sizes="(max-width: 500px) 120px,
                    400px" src="./images/mozilla-dinosaur400.png" alt="Mozilla 更多信息">
      </a>
      <a href="https://addons.mozilla.org/zh-CN/firefox/">
        <img srcset="images/firefox-addons120.jpg 120w,
                     images/firefox-addons400.jpg 400w" sizes="(max-width: 500px) 120px,
                    400px" src="./images/firefox-addons400.jpg" alt="使用扩展使 Firefox 更加个性化">
      </a>
      <a href="https://developer.mozilla.org/zh-CN/">
        <img src="images/mdn.svg" alt="访问 MDN 学习 Web 开发">
      </a>
      <div class="clearfix"></div>
    </div>

    <div class="red-panda">
      <picture>
        <source media="(max-width: 600px)" srcset="images/red-panda-portrait-small.jpg">
        <img src="originals/red-panda.jpg" alt="一只小熊猫">
      </picture>
    </div>

  </main>
</body>

</html>